<template>
	<view>
		<view class="bg"></view>
		<view class="content">
			<form>
				<!-- 负责人 -->
				<div class="form-group">
					<label>负责人：</label>
					<view class="mine-input">
						<input type="text" placeholder="输入负责人姓名">
					</view>
				</div>
				<!-- 身份证号码 -->
				<div class="form-group">
					<label>身份证号码：</label>
					<view class="mine-input">
						<input type="text" placeholder="输入负责人身份证号码">
					</view>
				</div>
				<!-- 手机号 -->
				<div class="form-group">
					<label>手机号：</label>
					<view class="mine-input">
						<input type="text" placeholder="输入负责人手机号">
					</view>
				</div>
				<!-- 验证码 -->
				<div class="form-group">
					<label>验证码：</label>
					<view class="mine-input">
						<input type="text" placeholder="输入验证码" style="width: 100px;">
						<view style="color: #00000033; margin-right: 10px; line-height: 18px;">|</view>
						<view style="color: #3183FB; line-height: 20px;" @click="getVerificationCode">获取验证码</view>
					</view>
				</div>
				<!-- 店名 -->
				<div class="form-group">
					<label>店名：</label>
					<view class="mine-input">
						<input type="text" placeholder="输入店名">
					</view>
				</div>
				<!-- 工商营业执照号码 -->
				<div class="form-group">
					<label>工商营业执照号码：</label>
					<view class="mine-input">
						<input type="text" placeholder="输入营业执照号码">
					</view>
				</div>
				<!-- 经营区域 -->
				<div class="form-group">
					<label>经营区域：</label>
					<view class="mine-input">
						<view v-if="msg !== '请选择区县'">{{ msg }}</view>
						<view v-if="msg === '请选择区县'" style="color: #00000088;">请选择区县</view>
						<image src="../../../static/msj/收起箭头.png" style="width:12px; height: 12px; margin-top: 7rpx;"
							@click="selectLocation">
						</image>
					</view>
				</div>
				<!-- 地址 -->
				<div class="form-group">
					<label>地址：</label>
					<view class="mine-input">
						<input type="text" placeholder="输入详情地址">
					</view>
				</div>
			</form>
		</view>

		<!-- 商家简介 -->
		<view class="content">
			<span style="font-size: 16px; font-weight: 600;">商家简介</span>
			<u--textarea v-model="text" placeholder="请准确介绍一下公司情况"
				style="height: 140px; border-radius: 12px; margin-top: 12px;">
			</u--textarea>
		</view>

		<!-- 上传组件 -->
		<view class="content">
			<span style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">身份证正反面照片</span>
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="5" multiple :maxCount="2"
				style="margin-top: 12px;">
			</u-upload>
		</view>
		<view class="content">
			<span style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">营业执照</span>
			<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="5" multiple :maxCount="1"
				style="margin-top: 12px;">
			</u-upload>
		</view>
		<view class="content">
			<span style="font-size: 16px; font-weight: 600; margin-bottom: 12px;">门店照片</span>
			<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="5" multiple :maxCount="1"
				style="margin-top: 12px;">
			</u-upload>
		</view>

		<!-- 注册按钮 -->
		<button type="primary" style="width: 600rpx; border-radius: 20px; margin-top: 30rpx;"
			@click="submitRegistration">
			注册
		</button>
	</view>
</template>

<script>
	export default {
		props: ['msg'],
		data() {
			return {
				text: '',
				fileList1: [],
				fileList2: [],
				fileList3: []
			};
		},
		methods: {
			selectLocation() {
				uni.redirectTo({
					url:'/pages/location/location',
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			getVerificationCode() {
				// 模拟验证码获取逻辑
				console.log("获取验证码");
			},
			submitRegistration() {
				// 模拟注册逻辑
				console.log("提交注册信息");
			}
		},
		onLoad(e) {
			this.msg = e.city || "请选择区县";
		},
		onShow() {
			console.log("页面显示", this.msg);
		}
	};
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		background-color: #3183FB;
		height: 160px;
	}

	.content {
		position: relative;
		top: -136px;
		left: 22.5rpx;
		border-radius: 20px;
		width: 94%;
		background-color: white;
		padding: 28px 16px;
		box-sizing: border-box;
		margin-bottom: 16px;
	}

	.form-group {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.form-group label {
		font-size: 14px;
	}

	.mine-input {
		border: 1px #00000033 solid;
		border-radius: 20px;
		width: 220px;
		height: 30px;
		padding: 4px 16px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.mine-input input {
		font-size: 14px;
	}
</style>